<template>
  <div class="signin-page">
      <div class="top-tools">
          <h3>各课程体系参与及签到情况</h3>
          <!-- <div class="select-school"> -->
              <!-- <el-select v-model="school" placeholder="选择学院">
                <el-option value="本科生院">本科生院</el-option>
              </el-select> -->
          <!-- </div> -->
      </div>
      <div id="signinData"></div>
  </div>
</template>

<script>
import { Chart } from '@antv/g2';
export default {
    data(){
        return{
            school:'本科生院',
            signinData:[
                { name: '参与人数', title: '其他', value: 1675 ,"签到率": 22,"参与人数":1675,"签到人数":366},
                { name: '参与人数', title: '春粟劳育计划', value: 40,"签到率": 0,"参与人数":40,"签到人数":0},
                { name: '参与人数', title: '多彩青春计划', value: 1671 ,"签到率": 45,"参与人数":1671,"签到人数":757},
                { name: '参与人数', title: '红色筑梦计划', value: 14672,"签到率": 0 ,"参与人数":14672,"签到人数":14},
                { name: '参与人数', title: '经典悦读计划', value: 30 ,"签到率": 0,"参与人数":30,"签到人数":0},
                { name: '参与人数', title: '全球胜任力计划', value: 73 ,"签到率": 71,"参与人数":73,"签到人数":52},
                { name: '参与人数', title: '师长领航计划', value: 62 ,"签到率": 0,"参与人数":62,"签到人数":0},
                { name: '参与人数', title: '双创引领计划', value: 1 ,"签到率": 0,"参与人数":1,"签到人数":0},

                { name: '签到人数', title: '其他', value: 366 ,"签到率": 22,"参与人数":1675,"签到人数":366},
                { name: '签到人数', title: '春粟劳育计划', value: 0 ,"签到率": 0,"参与人数":40,"签到人数":0},
                { name: '签到人数', title: '多彩青春计划', value: 757 ,"签到率": 45,"参与人数":1671,"签到人数":757},
                { name: '签到人数', title: '红色筑梦计划', value: 14 ,"签到率": 0,"参与人数":14672,"签到人数":14},
                { name: '签到人数', title: '经典悦读计划', value: 0 ,"签到率": 0,"参与人数":30,"签到人数":0},
                { name: '签到人数', title: '全球胜任力计划', value: 52 ,"签到率": 71,"参与人数":73,"签到人数":52},
                { name: '签到人数', title: '师长领航计划', value: 0 ,"签到率": 0,"参与人数":62,"签到人数":0},
                { name: '签到人数', title: '双创引领计划', value: 0 ,"签到率": 0,"参与人数":1,"签到人数":0},


                { name: '签到率'},
                { name: '签到率'},
                { name: '签到率'},
                { name: '签到率'},
                { name: '签到率'},
                { name: '签到率'},
                { name: '签到率'},
                { name: '签到率'}
            ],
        }
    },
    methods:{
        createChart(){
            const chart = new Chart({
                container: 'signinData',
                autoFit: true,
                height: 400,
            });
            chart.data(this.signinData);
            chart.scale('签到率', {
                nice: true,
            });
            chart.scale('签到率', {
                ticks: [0, 20, 40, 60, 80],
                formatter: (val) => `${val}%`,
            });
            chart.tooltip({
                showMarkers: false,
                shared: false,
            });
            chart.axis('title',{
                label:{
                    style:{
                        fill:'#fff',
                        fontSize:14,
                    }
                }
            })
            chart.axis('签到率',{
                label:{
                    style:{
                        fill:'#fff'
                    }
                }
            })
            chart.axis('value',{
                label:{
                    style:{
                        fill:'#fff'
                    }
                }
            })
            chart.legend({
                itemName:{
                    style:{
                        fill:'#fff',
                        fontSize:16,
                        lineHeight:18
                    }
                },
                marker:{
                    style:{
                        r:8
                    }
                }
            })
            chart
            .interval()
            .position('title*value')
            .color('name',['#00FFEE','#FFB73B','#FF5DE4'])
            .adjust([
                {
                type: 'dodge',
                marginRatio: 0.6,
                },
            ]).tooltip(false);

            chart.area().position('title*签到率')
            .color('name',['#FF5DE4','#FF5DE4'])
            .shape('smooth').tooltip('参与人数*签到人数*签到率');

            
            chart.line().position('title*签到率')
            .color('name',['#FF5DE4','#FF5DE4'])
            .shape('smooth').tooltip(false);

            
            chart.point().position('title*签到率')
            .color('name',['#FF5DE4','#FF5DE4'])
            .shape('circle').tooltip(false);


            chart.interaction('active-region');
            chart.render();
	  }
    },
    mounted(){
        this.createChart()
    }
}
</script>

<style lang="scss" scoped>
.signin-page{
    padding: 12px 20px;
    .top-tools{
        display: flex;
        justify-content: space-between;
        align-items: center;
        h3{
            font-size: 16px;
            height: 16px;
            line-height: 16px;
            padding-left: 10px;
            border-left: 4px solid #00FFEE;
        }
    }
    
}

</style>
<style>
.el-input__inner{
    width: 144px;
    height: 34px;
    border-color:#2A55FF ;
    background: #2A55FF;
    color: #fff;
}
</style>